<template>
  <div class='dashboard'>
    <!-- 左侧栏 -->
    <div class="left-column">
      <DeptSelect @changeDept="changeDept"></DeptSelect>
      <div class="left-box">
        <DashboardCard title="风险源统计" height="65%">
          <template #content>
            <div class="content risk-level-content hide-scrollbar">
              <!-- <RiskLevel></RiskLevel> -->
              <RiskLevelPie></RiskLevelPie>
              <RiskLevelBar></RiskLevelBar>

            </div>
          </template>
        </DashboardCard>
        <DashboardCard title="风险来源" height="calc(35% - 15px)">
          <template #content>
            <div class="content basic-information-content hide-scrollbar">
              <!-- <BasicInformation></BasicInformation> -->
            </div>
          </template>
        </DashboardCard>
      </div>
    </div>

    <!-- 中间栏 -->
    <div class="middle-column flex flex-column">
      <div class="mian-title-box marginb-15">
        <CustomTitle title="安全设备运行情况" :showLogo="false" prefixClass="">
          <template #prefixClass>
            <div class="prefix-before"></div>
          </template>
        </CustomTitle>
      </div>
      <div class="middle-content flex flex-1 flex-column padding-15 flex-jcenter">
        <!-- <MiddleTitle ref="middleTitle"></MiddleTitle> -->
        <div class="map flex flex-1 both-100">
          <LongyanMap width="100%" height="100%"></LongyanMap>
        </div>
        <div class="searchImg">
          <el-select size="small" placeholder="请选择图片" v-model="middleComponent">
            <el-option key="1" value="1" label="平面图"></el-option>
            <el-option key="2" value="2" label="实景图"></el-option>
          </el-select>
        </div>
      </div>
    </div>

    <!-- 右侧栏 -->
    <div class="right-column flex-column flex-space-between overflow-auto both-100 hide-scrollbar">
      <DashboardCard title="安全检查以及隐患排查" height="60%">
        <template #content>
          <div class="content risk-level-content hide-scrollbar">
            <!-- <RiskLevel></RiskLevel> -->
          </div>
        </template>
      </DashboardCard>
      <DashboardCard title="事件详情" height="calc(40% - 25px)">
        <template #content>
          <div class="content basic-information-content hide-scrollbar">
            <!-- <BasicInformation></BasicInformation> -->
          </div>
        </template>
      </DashboardCard>
    </div>
  </div>
</template>
<script>
import DashboardCard from '@/components/Dashboard/Card'
import LongyanMap from '@/components/map/longyan.vue'
import DeptSelect from '@/components/Dashboard/DeptSelect'
import RiskLevelPie from './components/RiskLevelPie'
import RiskLevelBar from './components/RiskLevelBar'
export default {
  components: {
    DashboardCard,
    LongyanMap,
    DeptSelect,
    RiskLevelPie,
    RiskLevelBar
  },
  data () {
    return {
      //pointName
      leftTitle: '项目点名称',
      middleComponent: ''

    };
  },
  computed: {
  },
  watch: {},
  methods: {
    // 点击详情方法
    goDetails () {
    },
    /**
     * 根据部门ID更改数据
     * @param {string} deptId 部门ID
     * @returns {void} 如果deptID为空，则不执行任何操作
     */
    changeDept (deptId, pointId) {
      console.log(pointId)
      if (!deptId) {
        return
      }
      // 组件列表
      const impleMentList = ['refBox1', 'refBox2', 'refBox3', 'refBox4', 'middleTitle', 'riskPointList']
      impleMentList.forEach(item => {
        try {
          if (this.$refs[item] && typeof this.$refs[item].getData === 'function') {
            this.$refs[item].getData(deptId)
          }
        } catch (error) {
          console.error(error)
        }
      })
    }
  },
  created () {
  },
  mounted () {

  },
}
</script>

<style lang='less' scoped>
.dashboard {
  display: grid;
  grid-template-columns: 440px auto 440px;
  grid-gap: 10px;
  height: 100vh;
  .left-column,
  .middle-column,
  .right-column {
    overflow: auto;
    height: calc(100vh - 140px);
    // border: 1px solid #ccc;
  }

  .left-column {
    grid-column-start: 1;
    grid-column-end: 2;
    .left-box {
      height: 100%;
      position: relative;
      .left-box-header {
        height: 40px;
        background: url("@/assets/images/dashboard/db_center_header.png")
          no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        .title {
          font-family: "YOUSHEBIAOTIHEI-2";
          font-weight: 400;
          font-size: 24px;
        }
        .details {
          position: absolute;
          right: 20px;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.2s ease;
          i {
            font-size: 12px;
          }
          &:hover {
            color: @primary;
          }
        }
      }
      .left-box-content {
        height: calc(100% - 60px);
        background: url("@/assets/images/dashboard/db_content.png") no-repeat;
        background-size: 100% 100%;
        overflow: auto;
        .address {
          text-align: center;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #8fabbf;
        }
        .left-box1 {
          height: 25%;
          overflow: auto;
        }
        .left-box2 {
          height: 35%;
          overflow: auto;
        }
        .left-box3 {
          height: 15%;
          overflow: auto;
        }
        .left-box4 {
          height: 35%;
          overflow: auto;
        }
      }
      .left-box-footer {
        background: url("@/assets/images/dashboard/db_footer.png") no-repeat;
        height: 20px;
      }
    }
  }

  .middle-column {
    grid-column-start: 2;
    grid-column-end: 3;
    .mian-title-box {
      height: 24px;
      .prefix-before {
        content: "";
        position: absolute;
        top: 8px;
        left: 0;
        // background: @primary;
        border-left: 3px solid @primary;
        border-bottom: 3px solid transparent;
        border-right: 3px solid transparent;
        border-top: 3px solid transparent;
      }
    }
    .middle-content {
      // background-image: url("@/assets/images/dashboard/map.png");
      // background-repeat: no-repeat;
      // background-size: 100% 100%;
      // cursor: pointer;
      position: relative;
      .searchImg {
        position: absolute;
        bottom: 0;
        overflow: hidden;
      }
    }
  }

  .right-column {
    grid-column-start: 3;
    grid-column-end: 4;
    box-sizing: border-box;
    .content {
      width: 100%;
      height: 100%;
    }
    .risk-level-content {
      overflow: auto;
    }
    .basic-information-content {
      overflow: auto;
    }
    .main-point-content {
    }
  }
}

.db-card-box {
  margin-top: 15px;
}
.db-card-box:first-child {
  margin-top: 0;
}
</style>